<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .tab {
            width: 500px;
            height: 500px;
            /* background-color: antiquewhite; */
        }

        .tab .tab-nav {
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
        }

        .tab .tab-nav p {
            font-size: 20px;
        }

        .tab ul {
            display: flex;
        }

        .tab ul li {
            margin-right: 20px;
        }
        .active{
            color: red;
            border-bottom: 1px solid red;
        }
        .tab-item {
            display: flex;
        }

        .tab-item .item {
            height: 150px;
            width: 150px;
            margin: 0 20px;
        }

        .content-right {
            display: flex;
            flex-wrap: wrap;
        }
        .content{
            display: none;
        }
        .show{
            display: block;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab-nav">
            <p>服饰</p>
            <ul>
                <li><a href="#" class="active" data-id="0">服饰</a></li>
                <li><a href="#" data-id="1">厨电</a></li>
                <li><a href="#" data-id="2">食品</a></li>
                <li><a href="#" data-id="3">居家</a></li>
                
            </ul>
        </div>
        <div class="tab-content">
            <div class="content show">
                <div class="tab-item">
                    <img src="./images/tab/clothes_goods_cover.jpg" alt="" width="100px">
                    <div class="content-right leftfix">
                        <img src="./images/tab/clothes_goods_1.jpg" alt="" class="item">
                        <img src="./images/tab/clothes_goods_2.jpg" alt="" class="item">
                        <img src="./images/tab/clothes_goods_3.jpg" alt="" class="item">
                        <img src="./images/tab/clothes_goods_4.jpg" alt="" class="item">
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="tab-item">
                    <img src="./images/tab/home_goods_cover.jpg" alt="" width="100px">
                    <div class="content-right">
                        <img src="./images/tab/home_goods_1.jpg" alt="" class="item">
                        <img src="./images/tab/home_goods_2.jpg" alt="" class="item">
                        <img src="./images/tab/home_goods_3.jpg" alt="" class="item">
                        <img src="./images/tab/home_goods_4.jpg" alt="" class="item">

                    </div>
                </div>
            </div>
            <div class="content">
                <div class="tab-item">
                    <img src="./images/tab/fresh_goods_cover.png" alt="" width="100px">
                    <div class="content-right">
                        <img src="./images/tab/fresh_goods_1.jpg" alt="" class="item">
                        <img src="./images/tab/fresh_goods_2.jpg" alt="" class="item">
                        <img src="./images/tab/fresh_goods_3.jpg" alt="" class="item">
                        <img src="./images/tab/fresh_goods_4.jpg" alt="" class="item">
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="tab-item">
                    <img src="./images/tab/kitchen_goods_cover.jpg" alt="" width="100px">
                    <div class="content-right">
                        <img src="./images/tab/kitchen_goods_1.jpg" alt="" class="item">
                        <img src="./images/tab/kitchen_goods_2.jpg" alt="" class="item">
                        <img src="./images/tab/kitchen_goods_3.jpg" alt="" class="item">
                        <img src="./images/tab/kitchen_goods_4.jpg" alt="" class="item">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // const arr = document.querySelectorAll('.tab-nav a')
        // for (let i = 0; i < arr.length; i++) {
        //     arr[i].addEventListener('mouseenter',function(){
        //         document.querySelector('.tab-nav .active').classList.remove('active')
        //         this.classList.add('active')

        //         document.querySelector('.tab-content .show').classList.remove('show')
        //         document.querySelector(`.tab-content .content:nth-child(${i+1})`).classList.add('show')

        //     }) 
        // }

        // 采用事件委托减少注册次数
        const ul = document.querySelector('.tab-nav ul')
        // 给父元素绑定监听事件
        ul.addEventListener('mouseover',function(e){
            if(e.target.tagName==='A'){
                // 移除active
                document.querySelector('.tab-nav .active').classList.remove('active')
                // 给当前元素添加active
                e.target.classList.add('active')
                // 获取当前元素data-id属性值
                const i=+e.target.dataset.id
                // 切换图片
                document.querySelector('.tab-content .show').classList.remove('show')
                document.querySelector(`.tab-content .content:nth-child(${i+1})`).classList.add('show')
            }
        })

    </script>
</body>

</html>